import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import * as actions from '../../actions';
import {filterTypes} from '../../../Filter';

import {View as TodoItem} from '../TodoItem';

class TodoList extends Component {
    render() {
        const {todos, dispatch} = this.props;
        return (
            <ul>
                {
                    todos.map((item, index) => {
                        return (
                            <TodoItem
                                key={item.id}
                                completed={item.completed}
                                text={item.text}
                                onToggle={() => {
                                	dispatch(actions.toggleTodo(item.id));
                                }}
                                onRemove={() => {
                                	dispatch(actions.removeTodo(item.id));
                                }}
                            />
                        );
                    })
                }
            </ul>
        );
    }
}

TodoList.propTypes = {};

function selectVisibleTodos(todos, filter) {
    switch(filter) {
        case filterTypes.ALL: {
            return todos;
        }
        case filterTypes.COMPLETED: {
            return todos.filter((item) => {
            	return item.completed;
            });
        }
        case filterTypes.UNCOMPLETED: {
            return todos.filter((item) => {
                return (
                    !item.completed
                );
            });
        }
    }
}

function mapStateToProps(state, ownProps) {
    return {
        todos: selectVisibleTodos(state.todos, state.filter)
    };
}

export default connect(mapStateToProps)(TodoList);
